<template>
	<view class="container">
		<!-- 顶部区域 -->
		<view class="top-box">
			<!-- 顶部背景 -->
			<view class="top_bg" :style="{background: topBgColor}">
			</view>
			<!-- 顶部轮播图 -->
			<view class="banner">
				<uni-swiper-dot :info="banner" :current="current" mode="dot" field="content">
					<swiper class="swiper-box" @change="swiperDotIndex">
						<swiper-item v-for="(item, index) in banner" :key="index">
							<image :src="item"></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>

		</view>
		<!-- 海报图 -->
		<view class="pic">
			<image :src='hbt'></image>
		</view>
		<!-- 商品分类 -->
		<view class="category-list">
			<uni-grid :column="4" :highlight="true" :showBorder="false">
				<uni-grid-item v-for="(item, index) in categorys" :index="index" :key="index">
					<view class="grid-item-box" @click="toCategory(item.id)">
						<image :src="item.image"></image>
						<view>{{item.name}}</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 商品推荐 -->
		<view class="fire-name">
			<uni-icons color="#ff557f" type="fire-filled" size="30"></uni-icons>
			<text>推荐商品</text>
		</view>
		<!-- 商品列表 -->
		<view class="goods-item" v-for="goodInfo in goods" :key="goodInfo.id">
			<!-- :width="nvueWidth"  如果下面有row元素，才有效果 -->
			<uni-row class="demo-uni-row" >
				<uni-col :span="12"  @click="toGoodDetail(goodInfo.id)">
					<image class="goods-pic" :src="goodInfo.cover"  @click="toGoodDetail(goodInfo.id)"></image>
				</uni-col>
				<uni-col :span="8">
					<view  class="good-info" @click="toGoodDetail(goodInfo.id)" >
						<view  class="good-title">{{goodInfo.title}}</view>
						<view  class="good-desc">{{goodInfo.desc}}</view>
						<view  class="good-price">{{goodInfo.price}}/份</view>
					</view>
				</uni-col>
				<uni-col :span="4 ">
					<view class="cart-icon">
						<image src="../../static/tabBar/shoppingCarHL.png" ></image>
					</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	import http from '../../api/request.js'
	export default {
		data() {
			return {
				topBgColor: "rgb(255,85,127)",
				hbt:"https://file.boyoulsh.com/ywh/1.png",
				current: 0,
				// 轮播图
				banner: [],
				bs: ["rgb(255,85,127)",
					"rgb(255,170,0)",
					"rgb(170,0,0)",
					"rgb(0,170,127)"
				],
				// 分类集合
				categorys: [{
						"id": 1,
						"image": "https://file.boyoulsh.com/ywh/1.png",
						"name": "分类一",
						"status": true
					},
					{
						"id": 2,
						"image": "https://file.boyoulsh.com/ywh/1.png",
						"name": "分类二",
						"status": true
					},
					{
						"id": 3,
						"image": "https://file.boyoulsh.com/ywh/1.png",
						"name": "分类三",
						"status": true
					},
					{
						"id": 4,
						"image": "https://file.boyoulsh.com/ywh/1.png",
						"name": "分类四",
						"status": true
					}
				],
				// 商品
				goods: [{
						"cover": "https://file.boyoulsh.com/ywh/1.png",
						"desc": "大凉山苹果1",
						"group": 1,
						"id": 1,
						"is_delete": false,
						"is_on": true,
						"price": "5.00",
						"recommend": true,
						"sales": 3,
						"title": "苹果1"
					},
					{
						"cover": "https://file.boyoulsh.com/ywh/1.png",
						"desc": "大凉山苹果2",
						"group": 1,
						"id": 2,
						"is_delete": false,
						"is_on": true,
						"price": "6.00",
						"recommend": true,
						"sales": 3,
						"title": "苹果2"
					},
					{
						"cover": "https://file.boyoulsh.com/ywh/1.png",
						"desc": "大凉山苹果3",
						"group": 1,
						"id": 3,
						"is_delete": false,
						"is_on": true,
						"price": "7.00",
						"recommend": true,
						"sales": 3,
						"title": "苹果3"
					},
					{
						"cover": "https://file.boyoulsh.com/ywh/1.png",
						"desc": "大凉山苹果4",
						"group": 1,
						"id": 4,
						"is_delete": false,
						"is_on": true,
						"price": "8.00",
						"recommend": true,
						"sales": 3,
						"title": "苹果"
					}
				]
			}
		},
		methods: {
			async loginSubmit() {
				const response = await this.$api.user.login();
				console.info(response.data);
			},
			//获取首页数据
			async getIndexData() {
				this.banner.push('https://file.boyoulsh.com/ywh/1.png');
				this.banner.push('https://file.boyoulsh.com/ywh/1.png');
				this.banner.push('https://file.boyoulsh.com/ywh/1.png');
				this.banner.push('https://file.boyoulsh.com/ywh/1.png');
				console.info(this.banner)
			},
			swiperDotIndex(e) {
				//根据背景图的索引位置，从bs中获取一个背景色
				this.current = e.detail.current
				let index = this.current % 4
				//切换背景图的颜色
				this.topBgColor = this.bs[index]
			},
			//跳转商品详情页
			toGoodDetail(goodId){
				const url = `/pages/goodDetail/goodDetail?id=${goodId}`
				uni.navigateTo({
					url:url
				})
			},
			//跳转到分类页面
			toCategory(categoryId){
				//将选中的分类id保存到vuex
				
				//跳转到分类页面
				uni.switchTab({
					url:'/pages/category/category'
				})
			}
		},
		//打开页面就会加载 
		onLoad() {
			this.getIndexData();
		}
	}
</script>

<style lang="scss">
	.container {
		//padding: 20upx;
		font-size: 14upx;
		line-height: 24upx;
	}

	// 顶部样式
	.top-box {
		.top_bg {
			height: 400upx;
			// background: $uni-primary;
		}

		.banner {
			text-align: center;
			margin-top: -250upx;
			padding: 20upx;
			border-radius: 20upx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 20upx;
			}
		}
	}

	// 海报图样式
	.pic {
		image {
			width: 100%;
			height: 200upx;
			border: 1px red solid;
		}
	}

	// 商品分类 
	.category-list {
		margin-top: 10upx;
		padding: 10upx;
		background: #fff;

		//单个菜单的样式
		.grid-item-box {
			text-align: center;
			font-size: 20upx;

			image {
				width: 150upx;
				height: 150upx;
				border-radius: 50%;
				background: #eefeff;
			}
		}
	}

	//热销产品
	.fire-name {
		font-weight: bold;
		font-size: 30upx;
		color: #ff557f;
		line-height: 80upx;
		height: 80upx;
	}

	//商品列表
	.goods-item {
		margin: 10upx;
		background: #fff;
		height: 300upx;
		// box-shadow: 0 0 5px #9d9d9d;
		border-radius: 10upx;
		.goods-pic{
			width: 300upx;
			height: 300upx;
		}
		.good-info{
			// display: flex;
			// align-items: center;
			.good-title{
				font-size: 30upx;
				height: 100upx;
				line-height: 100upx;
			}
			.good-desc{
				font-size: 20upx;
				height: 100upx;
				line-height: 30upx;
				color: #8b8b8b;
			}
			.good-price{
				font-weight: bold;
				color: #ff557f;
				font-size: 30upx;
				height: 100upx;
				line-height: 100upx;
			}
		}
		.cart-icon{
			text-align: center;
			line-height: 300upx;
			image{
				width: 50upx;
				height: 50upx;
			}
		}
	}
</style>